
<!-- <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
  </div> -->
<template>
  <div class="dashboard-page">
    <!-- 机构 -->
    <el-row :gutter="20">
      <el-col :span="14">
        <div style="height: 230px;" class="grid-content bg-purple">
          <div style="height: 50px;line-height: 50px; padding-left: 20px; font-size: 16px;">
            机构概述
          </div>
          <div class="top-letf">
            <h4>{{ organOverview.organName }}</h4>
            <p>地址：{{ organOverview.organAddress }}</p>
            <p>负责人：{{ organOverview.principal }} {{ organOverview.phone }}</p>
            <button>按钮</button>
          </div>
          <div class="top-right">
            <div class="item">
              <div data-v-34395690="" class="label">分拣中心(个)</div> <div data-v-34395690="" class="num">
                {{ organOverview.sortingCenterNumber }}
              </div>
            </div>
            <div class="item">
              <div data-v-34395690="" class="label">营业部(个)</div> <div data-v-34395690="" class="num">
                {{ organOverview.agencyNumber }}
              </div>
            </div>
            <div class="item">
              <div data-v-34395690="" class="label">司机人数(个)</div> <div data-v-34395690="" class="num">
                {{ organOverview.driverNumber }}
              </div>
            </div>
            <div class="item">
              <div data-v-34395690="" class="label">快递人员数(个)</div> <div data-v-34395690="" class="num">
                {{ organOverview.courierNumber }}
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div style="height: 230px;line-height: 50px;" class="grid-content bg-purple">
          <div class="sj-top">
            <div>
              <span style="font-size: 16px;">今日数据</span>
            </div>
            <div>
              <svg-icon icon-class="u768" @click="newTime" />
              <span style="font-size: 14px;color: #818693;">{{ time }}</span>
            </div>
          </div>
          <div class="aaa">
            <div style="width:33%;">
              <div class="label">订单金额(元)</div>
              <div id="my-number1" class="value">{{ todayData.orderAmount }}</div>
              <div class="bottom">较昨日 +{{ todayData.orderAmountChanges }}</div>
            </div>
            <div style="width:33%;">
              <div class="label">订单数量(笔)</div>
              <div id="my-number2" class="value">{{ todayData.orderNumber }}</div>
              <div class="bottom">较昨日 +{{ todayData.orderNumberChanges }}</div>
            </div>
            <div style="width:33%;">
              <div class="label">运输任务(次)</div>
              <div id="my-number3" class="value">{{ todayData.transportTaskNumber }}</div>
              <div class="bottom">较昨日 +{{ todayData.transportTaskNumberChanges }}</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 结束机构 -->
    <!-- 代办 -->
    <el-row :gutter="20" style="hi">
      <el-col :span="14">
        <div style="height: 255px;" class="grid-content bg-purple">
          <div class="sj-top">
            <div>
              <span style="font-size: 16px;">待办任务</span>
              <svg-icon icon-class="u740" />
            </div>
            <div>
              <svg-icon icon-class="u768" @click="newTime" />
              <span style="font-size: 14px;color: #818693;">{{ time }}</span>
            </div>
          </div>
          <div class="tp-top" style="text-align: center;height: 205px">
            <el-row>
              <el-col :span="6">
                <div>
                  <img src="@/assets/img/工作台/u397.png" alt="">
                </div>
                <span>待取件</span><span class="color">{{ backlog.waitingPickupNumber }}</span>
              </el-col>
              <el-col :span="6">
                <div>
                  <img src="@/assets/img/工作台/u397.png" alt="">
                </div>
                <span>待派件</span><span class="color">{{ backlog.waitingDispatchNumber }}</span>
              </el-col>
              <el-col :span="6">
                <div>
                  <img src="@/assets/img/工作台/u397.png" alt="">
                </div>
                <span>未分配运输</span><span class="color">{{ backlog.unassignedTransportTaskNumber }}</span>
              </el-col>
              <el-col :span="6">
                <div>
                  <img src="@/assets/img/工作台/u397.png" alt="">
                </div>
                <span>超时运输</span><span class="color">{{ backlog.timeoutTransportTaskNumber }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div style="height: 255px;" class="grid-content bg-purple">
          <div class="sj-top">
            <div>
              <span style="font-size: 16px;">执行中任务</span>
              <svg-icon icon-class="u740" />
            </div>
            <div>
              <svg-icon icon-class="u768" @click="newTime" />
              <span style="font-size: 14px;color: #818693;">{{ time }}</span>
            </div>
          </div>
          <div class="tp-top" style="text-align: center;">
            <el-row>
              <el-col :span="12">
                <div>
                  <img src="@/assets/img/工作台/u397.png" alt="">
                </div>
                <span>运输中</span><span class="color">{{ backlog.waitingDispatchRate }}</span>
              </el-col>
              <el-col :span="12">
                <div>
                  <img src="@/assets/img/工作台/u397.png" alt="">
                </div>
                <span>派送中</span><span class="color">{{ backlog.waitingPickupRate }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 结束代办 -->
    <!-- 常用功能 -->
    <el-row>
      <el-col :span="4">
        <div style="height: 190px; padding-left: 20px; font-size: 16px; cursor:pointer;" class="grid-content bg-purple">
          <div style="line-height: 50px;">常用功能</div>
          <div class="cent-top">
            <svg-icon icon-class="u433" />
            <p>快递作业</p>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div style="height: 190px;padding-top: 50px; cursor:pointer;" class="grid-content bg-purple">
          <div class="cent-top">
            <svg-icon icon-class="u437" />
            <p>运输任务</p>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div style="height: 190px;padding-top: 50px; cursor:pointer;" class="grid-content bg-purple">
          <div class="cent-top">
            <svg-icon icon-class="u424" />
            <p>线路管理</p>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div style="height: 190px;padding-top: 50px; cursor:pointer;" class="grid-content bg-purple">
          <div class="cent-top">
            <svg-icon icon-class="u407" />
            <p>车辆管理</p>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div style="height: 190px;padding-top: 50px; cursor:pointer;" class="grid-content bg-purple">
          <div class="cent-top">
            <svg-icon icon-class="u429" />
            <p>司机管理</p>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div style="height: 190px;padding-top: 50px; cursor:pointer;" class="grid-content bg-purple">
          <div class="cent-top">
            <svg-icon icon-class="u443" />
            <p>运费查询</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 结束常用功能 -->
    <!-- 线路管理   运输任务 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div style="height: 450px; padding-left: 20px; font-size: 16px; cursor:pointer;" class="grid-content bg-purple">
          <div style="line-height: 50px;">线路管理</div>
          <div style="text-align: center;">
            <img style="height: 400px;width:600px;" src="@/assets/img/u739.png" alt="">
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="height: 450px; padding-left: 20px; font-size: 16px; cursor:pointer;" class="grid-content bg-purple">
          <div style="line-height: 50px;">
            <div class="sj-top">
              <div>
                <span style="font-size: 16px;">运输任务</span>
              </div>
              <div>
                <span style="font-size: 14px;color: #818693;">查看更多</span>
                <svg-icon icon-class="u320" @click="$router.push('/dispatch/transportation')" />
              </div>
            </div>
          </div>
          <!-- 表格元素 -->
          <div>
            <template>
              <el-table :data="tableData" border style="width: 98%">
                <el-table-column prop="id" label="任务编号" width="180" />
                <el-table-column prop="startAgency" label="起始地" width="180" />
                <el-table-column prop="endAgency" label="目的地" />
                <el-table-column prop="licensePlate" label="车辆" />
                <el-table-column label="任务状态">
                  <template slot-scope="scope">
                    {{ scope.row.status === 2 ? '进行中' : '已完成' }}
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 结束线路管理   运输任务 -->
  </div>
</template>

<script>
import { getWorkspace } from '@/api/user'
import { parseTime } from '@/utils/index'
export default {
  name: 'DashboardPage',
  data() {
    return {
      // 表格数据
      tableData: [],
      time: parseTime(new Date()),
      loading: true,
      // 机构数据
      organOverview: {},
      // 交易数据
      todayData: {},
      // 代办任务
      backlog: {}
    }
  },
  async created() {
    const res = await getWorkspace()
    console.log(res)
    this.organOverview = res.data.data.organOverview
    this.todayData = res.data.data.todayData
    this.backlog = res.data.data.backlog
    this.tableData = res.data.data.transportTaskList
  },
  methods: {
    newTime() {
      this.time = parseTime(new Date())
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-page {
  .top-letf{
    float: left;
    margin-left: 20px;
    width: 50%;
    border-right:1px solid #ebeef5;
    h4{
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 13px;
    }
    p {
    font-size: 14px;
    color: #818693;
    }
    button{
      margin-top: 10px;
      font-size: 14px;
      color: #e15536;
      width: 158px;
      height: 40px;
      background: #ffeeeb;
      border: 1px solid #f3917c;
      border-radius: 4px;
    }
  }
  .top-right{
    display: flex;
    flex-wrap: wrap;
    .item{
      flex: 50%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-bottom: 30px;
      .label{
        font-size: 14px;
        margin-bottom: 10px;
      }
      .num{
        font-size: 32px;
        font-weight: 700;
        color: #e15536;
        cursor: pointer;
      }
    }
  }
  .sj-top{
    padding-left: 20px;
    padding-right: 20px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
  }
  .tp-top{
    .color{
      color: #e15536;
      font-weight: 700;
      padding-left: 10px;
    }
    img{
    border-width: 0px;
    width: 135px;
    height: 147px;
    }

  }
  .aaa{
    display: flex;
    text-align: center;
    .label{
      font-size: 14px;
      color: #20232a;
      margin-bottom: 21px;
    }
    .value{
        font-size: 32px;
        font-weight: 700;
        color: #e15536;
      }
  }
  .cent-top{
    margin: 0 auto;
    width: 245px;
    height: 116px;
    text-align: center;
    background-color: #fafafb;
    padding-top: 25px;
    .svg-icon{
      background-color: #20232a;
      width: 44px;
      height: 47px;
    }
  }
  .el-row {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #fff;
  }
  .bg-purple {
    background: #fff;
  }
  .bg-purple-light {
    background: #fff;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #fff;
  }
}
</style>
